<template>
  <div class="settings">
    <el-card>
      <!-- 设置头部 -->
      <my-header slot="header" title="个人信息"></my-header>
      <!-- 主体内容 -->
      <div class="main-content">
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="编号 :">
                {{ userInfo.id }}
              </el-form-item>
              <el-form-item label="手机 :">
                {{ userInfo.mobile }}
              </el-form-item>
              <el-form-item prop="name" label="媒体名称 :">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="媒体简介 :">
                <el-input
                  :maxlength="120"
                  type="textarea"
                  :rows="4"
                  v-model="form.intro"
                ></el-input>
              </el-form-item>
              <el-form-item prop="email" label="练习邮箱 :">
                <el-input v-model="form.email"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click.stop="setUser"
                  >保存设置</el-button
                >
              </el-form-item>
            </el-col>
            <el-col class="settings-right" :span="12">
              <el-upload
                ref="upload"
                class="avatar-uploader"
                :http-request="uploadFile"
                :show-file-list="false"
                action=""
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="setAvatar">修改头像</div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { userGetProfile } from '@/api/user'
import { uploadFile, setUserInfo } from '@/api/settings'
export default {
  name: 'Settings',
  props: {
    user: {
      type: Object
    }
  },
  data () {
    return {
      form: {
        name: '',
        intro: '',
        email: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名字', trgger: 'change' },
          { min: 1, max: 7, message: '请输入1-7个字符的名字', trgger: 'change' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trgger: 'change' },
          {
            pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
            message: '请输入正确的邮箱格式',
            trgger: 'change'
          }
        ]
      },
      // 头像预览
      imageUrl: '',
      // 用户基本信息
      userInfo: ''
    }
  },
  methods: {
    // 修改用户信息
    async setUser () {
      this.$refs.form.validate(async reslut => {
        if (reslut) {
          try {
            const res = await setUserInfo(this.form)
            this.user.name = res.data.name
            this.$message.success('修改成功!')
          } catch {
            this.$message.error('修改失败')
          }
        }
      })
    },
    // 自定义上传
    async uploadFile (pamars) {
      const _file = pamars.file
      const formDataImg = new FormData()
      formDataImg.append('photo', _file)
      const isJPG = _file.type === 'image/jpeg' || _file.type === 'image/png'
      const isLt2M = _file.size / 1024 / 1024 < 2
      if (isJPG && isLt2M) {
        const res = await uploadFile(formDataImg)
        this.imageUrl = res.data.photo
        this.user.photo = res.data.photo
        this.$message.success('修改头像成功')
      } else {
        this.$message.error('请上传不超过2M的JPG/PNG的格式图片')
      }
    }
  },
  async created () {
    const res = await userGetProfile()
    this.userInfo = res.data
    this.form.name = res.data.name
    this.form.intro = res.data.intro
    this.form.email = res.data.email
    this.imageUrl = res.data.photo
  }
}
</script>
<style lang="less">
.settings {
  .main-content {
    .settings-right {
      text-align: center;
      .setAvatar {
        margin-top: 10px;
      }
      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
  }
}
</style>
